<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>Title</title>
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
</head>
<body onload="loadDataList()">

<br>
<form class="form-horizontal">

    <div class="form-group">

        <label class="col-md-2" align="right"></label>
        <div class="col-md-2">
            <input type="text" id="material" class="form-control" placeholder="请输入食材名">
        </div>

        <input type="button" class="btn btn-success btn-sm" onclick="loadDataList()" value="查询">
    </div>
</form>

<table class="table">
    <thead>
    <th>食材id</th>
    <th>食材</th>
    <th>数量</th>
    <th>单价</th>

    </thead>
    <tbody id="tb">

    </tbody>
</table>
<div>
    <button type="button" class="btn btn-success btn-sm" onclick="pres()">上一页</button>
    <button type="button" class="btn btn-success btn-sm" onclick="nexts()">下一页</button>
    一共有<span id="total"></span>数据，共有<span id="totalPage"></span>页
</div>

</body>

<script>
    //默认页面是第一页
    var page = 1;
    var row = 5;
    var totalPage = 0;

    //上一页
    function pres() {
        page--;
        if (page < 1) {
            page = 1;
        }
        loadDataList();
    }

    //下一页
    function nexts() {
        page++;
        if (page > totalPage) {
            page = totalPage;
        }

        loadDataList();

    }

    //加载数据
    function loadDataList() {


        var material1 = $("#material").val();



        $.ajax({
            url: "${pageContext.request.contextPath}/warehouse/listAjax",
            type: "get",
            data: { "material": material1,"page": page, "row": row},
            dataType: "json",
            success: function (data) {
                console.log(data);
                console.log(typeof (data.info));
                if (typeof (data.info) == 'string') {
                    alert(data.info);
                    //清空
                    $("#tb").html(data.info);
                } else {
                    //取出总页数

                    totalPage = data.totalPage;
                    //显示总条数
                    $("#total").text(data.total);
                    //显示总页数
                    $("#totalPage").text(totalPage);

                    var html = "";
                    for (var i = 0; i < data.info.length; i++) {
                        html += "<tr>" +
                            "<td>" + data.info[i].wId + "</td>" +
                            "<td>" + data.info[i].material + "</td>" +
                            "<td>" + data.info[i].wNumber + "</td>" +
                            "<td>" + data.info[i].priceone + "</td>" +
                            "</tr>";
                    }

                    $("#tb").html(html);
                }


            }})
    }



</script>


</html>